<template>
  <div class="archive">
    <Header :headerInfo="{pageTitle}"/>
    <div class="container-md d-flex justify-content-between my-5" id="main">
      <div class="content">
        <h2>文章总览 - 10</h2>
        <div class="year">2021年</div>
        <ul class="year-list">
          <li>
            <p class="mb-0 month">10月(2篇文章)
              <span class="round iconfont icon-round"></span>
            </p>
            <ul class="month-list">
              <li>
                <p class="mb-0">
                  <span>15日</span><nuxt-link to="#">javascript进阶</nuxt-link>
                </p>
                <span class="round iconfont icon-round"></span>
              </li>
              <li>
                <p class="mb-0">
                  <span>10日</span><nuxt-link to="#"> css3新特性</nuxt-link>
                </p>
                <span class="round iconfont icon-round"></span>
              </li>
            </ul>
          </li>
        </ul>
        <div class="year">2020年</div>
        <ul class="year-list">
          <li>
            <p class="mb-0 month">8月(2篇文章)
              <span class="round iconfont icon-round"></span>
            </p>
            <ul class="month-list">
              <li>
                <p class="mb-0">
                  <span>15日</span><nuxt-link to="#">javascript基础</nuxt-link>
                </p>
                <span class="round iconfont icon-round"></span>
              </li>
              <li>
                <p class="mb-0">
                  <span>10日</span><nuxt-link to="#"> html5新标签</nuxt-link>
                </p>
                <span class="round iconfont icon-round"></span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <AsideContent/>
    </div>
    <Footer/>
  </div>
</template>

<script>

export default {
  data() {
    return {
      pageTitle:'归档 | Archive'
    }
  }

}
</script>

<style>
  .round {
     transition: all .4s;
  }
  .content .year{
    padding-left: 110px;
    font-size: 1.3rem;
    font-weight: 640;
    color: var(--base-text-color);
  }
  .content .year-list {
    font-size: 1rem;
    padding: 10px 0;
    position: relative;
  }
  .content .year-list::before {
    content:"";
    position: absolute;
    top: 0;
    left: 132px;
    height: 100%;
    width: 2px;
    background-color:var(--primary);
  }
  .content .month {
    position: relative;
    padding: 2px 0;
    color: var(--base-text-color);
  }
  .content .month:hover .round{
    color: var(--primary-hover-color);
  }
  .content .month .round,.content .month-list li .round {
    font-size: 18px;
    color:var(--primary);
    position: absolute;
    top: 2px;
    left: 124px;
    z-index: 9;
  }
  .content .round::before {
    background-color: var(--theme-color);
  }
  .content .month-list li {
    padding-left: 150px;
    position: relative;
  }
  .content .month-list li:hover .round{
    color: var(--primary-hover-color);
  }
  .content .month-list li .round {
    font-size: 12px;
    left: 127px;
    top: 4px;
  }
  .content .month-list li p>span {
    color: var(--primary);
    margin-right: 15px;
  }
  .content .month-list li p>a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--base-text-color);
  }
  .content .month-list li p>a:hover {
    color: var(--primary-hover-color);
  }
  
</style>